<?php
$url = $mosConfig_live_site."/images/banners/";
$sql = "SELECT name, imageurl, clickurl FROM #__banner WHERE showBanner=1 ORDER BY date DESC";
$database->setQuery($sql);
$lsBanners = $database->loadObjectList(); 
?>
<div id="slide-home" style="position:relative">
<div id="gallery">
	<?php
	for ($i=0; $i<count($lsBanners); $i++){ 
	?>
	<a style="opacity: 0;" href="<?php echo $lsBanners[$i]->clickurl;?>" target="_blank" class="">
		<img src="<?php echo $url.$lsBanners[$i]->imageurl;?>" title="<?php echo $lsBanners[$i]->name;?>" rel="" class="vtip" border="0">
	</a>
	<?php 
	}
	?>
<div style="opacity: 0.7; width: 680px;" class="caption"><div style="opacity: 0.7;" class="content"></div></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
	$(document).ready(function() {		
		slideShow();
	});
	function slideShow() {
		$('#gallery a').css({opacity: 0.0});
		$('#gallery a:first').css({opacity: 1.0});
		$('#gallery .caption').css({opacity: 0.7});
		$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
		$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
		.animate({opacity: 0.7}, 400);
		setInterval('gallery()',6000);
	}
	function gallery() {
		var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
		var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
		var caption = next.find('img').attr('rel');	
		next.css({opacity: 0.0})
		.addClass('show')
		.animate({opacity: 1.0}, 1000);
		current.animate({opacity: 0.0}, 1000)
		.removeClass('show');
		//$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
		//$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '50px'},500 );
		//$('#gallery .content').html(caption);
	}
</script>